<template>
  <div id="ContactUs">
    <div class="banner container-fuild text-center">个人中心</div>
    <div class="container">
      <div class="container-fuild ContactUs-container">
        <Tabs v-model="tabType" @on-click="TabsClick">
          <TabPane label="个人信息" icon="md-happy" name="first">
            <div class="row">
              <div>
                <img
                  :src="formInline.avatar"
                  style="width: 200px;height: 200px;border-radius: 50%;"
                />
                <div class="buttonBox">
                  <Button type="primary" @click="editUser" style="margin-bottom: 30px;">修改信息</Button>
                  <Button type="warning" @click="passwordModel = true">修改密码</Button>
                </div>
              </div>
              <Form ref="formInline" :model="formInline" :label-width="100">
                <FormItem prop="user" label="用户名">
                  <div class="labelBox">{{ formInline.userName }}</div>
                </FormItem>
                <FormItem prop="name" label="昵称">
                  <div class="labelBox">{{ formInline.name }}</div>
                </FormItem>
                <FormItem prop="phone" label="手机号">
                  <div class="labelBox">{{ formInline.phone }}</div>
                </FormItem>
                <FormItem
                  prop="email"
                  label="Email"
                  v-if="formInline.type == 2"
                >
                  <div class="labelBox">{{ formInline.email }}</div>
                </FormItem>
                <FormItem prop="age" label="年龄">
                  <div class="labelBox">{{ formInline.age }}</div>
                </FormItem>
                <FormItem prop="gender" label="性别">
                  <div class="labelBox">
                    {{ formInline.gender == 1 ? "男" : "女" }}
                  </div>
                </FormItem>
                <template v-if="formInline.type == 2">
                  <FormItem label="身份">
                    <div class="labelBox">
                      {{ formInline.isVip == 1 ? "vip用户" : "普通用户" }}
                    </div>
                  </FormItem>
                  <FormItem label="会员到期时间">
                    <div class="labelBox">{{ formInline.vipInvalidTime }}</div>
                  </FormItem>
                </template>
                <template v-else>
                  <FormItem label="身份">
                    <div class="labelBox">
                      教练
                    </div>
                  </FormItem>
                </template>
                <FormItem>
                  <Button type="success" @click="handelVipModel"
                  >{{ formInline.isVip == 1 ? "续费" : "成为" }}会员</Button
                  >
                  <Button @click="logout">退出登录</Button>
                </FormItem>
              </Form>
            </div>
          </TabPane>
          <TabPane label="我的课程" icon="ios-heart" name="second">
            <Table height="500" :columns="columns1" :data="list">
              <template slot-scope="{ row }" slot="action">
                <Button
                  type="primary"
                  size="small"
                  v-if="!row.isEvaluate"
                  @click="evaluate(row)"
                  >评价</Button
                >
                <Button size="small" @click="viewEvaluate(row)" v-else
                  >已评价</Button
                >
              </template>
            </Table>
          </TabPane>
          <TabPane
            label="我的评价"
            icon="md-text"
            name="third"
            v-if="formInline.type == 2"
          >
            <Table
              height="500"
              :columns="myEvaluateColumns"
              :data="myEvaluateList"
            >
              <template slot-scope="{ row }" slot="action">
                <Button type="primary" size="small" @click="editEvaluate(row)"
                  >编辑</Button
                >
                <Button size="small" @click="deleteEvaluate(row.id)"
                  >删除</Button
                >
              </template>
            </Table>
          </TabPane>
        </Tabs>
        <div style="margin: 20px 0;" v-if="tabType == 'second'">
          <Page
            :total="total"
            size="small"
            show-elevator
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
          />
        </div>
        <div style="margin: 20px 0;" v-if="tabType == 'third'">
          <Page
            :total="thirdtotal"
            size="small"
            show-elevator
            show-sizer
            @on-change="thirdpageChange"
            @on-page-size-change="thirdsizeChange"
          />
        </div>
        <Modal v-model="modalUser" title="个人信息修改">
          <Form
            ref="formUser"
            :model="formUser"
            :label-width="100"
            :rules="ruleUser"
          >
            <FormItem label="头像" prop="avatar">
              <div class="demo-upload-list" v-for="item in uploadList">
                <template v-if="item.status === 'finished'">
                  <img :src="item.url" />
                  <div class="demo-upload-list-cover">
                    <Icon
                      type="ios-trash-outline"
                      @click.native="handleRemove(item)"
                    ></Icon>
                  </div>
                </template>
                <template v-else>
                  <Progress
                    v-if="item.showProgress"
                    :percent="item.percentage"
                    hide-info
                  ></Progress>
                </template>
              </div>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg', 'jpeg', 'png']"
                type="drag"
                action="api/file/upFile"
                style="display: inline-block;width:58px;"
                :before-upload="handleBeforeUpload"
                :headers="headers"
              >
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
            <FormItem label="用户名">
              <div class="labelBox">{{ formUser.userName }}</div>
            </FormItem>
            <FormItem prop="name" label="昵称">
              <div class="labelBox">
                <Input v-model="formUser.name" placeholder="请输入昵称" />
              </div>
            </FormItem>
            <FormItem prop="phone" label="手机号">
              <div class="labelBox">
                <Input v-model="formUser.phone" placeholder="请输入手机号" />
              </div>
            </FormItem>
            <FormItem prop="email" label="Email" v-if="formInline.type == 2">
              <div class="labelBox">
                <Input v-model="formUser.email" placeholder="请输入Email" />
              </div>
            </FormItem>
            <FormItem prop="age" label="年龄">
              <div class="labelBox">
                <Input v-model.number="formUser.age" placeholder="请输入年龄" />
              </div>
            </FormItem>
            <FormItem label="性别">
              <div class="labelBox">
                <Select v-model="formUser.gender">
                  <Option
                    v-for="item in genderList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </div>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button @click="modalUser = false">取消</Button>
            <Button @click="userOk('formUser')" type="primary">确定</Button>
          </div>
        </Modal>
        <Modal v-model="modal1" title="课程评价">
          <Form
            ref="formEvaluate"
            :model="formEvaluate"
            :label-width="100"
            :rules="ruleEvaluate"
          >
            <FormItem label="课程名称">
              <div class="labelBox">{{ formEvaluate.courseName }}</div>
            </FormItem>
            <FormItem label="教练名称">
              <div class="labelBox">{{ formEvaluate.coachName }}</div>
            </FormItem>
            <FormItem label="上课时间">
              <div class="labelBox">
                {{ formEvaluate.time }} / {{ formEvaluate.type }}
              </div>
            </FormItem>
            <FormItem prop="score" label="评分">
              <Rate
                show-text
                v-model="formEvaluate.score"
                :disabled="evaluateType == 'view' ? true : false"
              />
            </FormItem>
            <FormItem prop="content" label="评价内容">
              <template v-if="evaluateType == 'view'">
                {{ formEvaluate.content }}
              </template>
              <template v-else>
                <Input
                  v-model="formEvaluate.content"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入"
                />
              </template>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button @click="modal1 = false">取消</Button>
            <Button
              @click="ok('formEvaluate')"
              type="primary"
              v-if="evaluateType !== 'view'"
              >确定</Button
            >
          </div>
        </Modal>
        <Modal v-model="vipModel" title="成为会员">
          <RadioGroup v-model="vipTimeType">
            <Radio :label="1">
              <span>月卡</span>
            </Radio>
            <Radio :label="2">
              <span>季卡</span>
            </Radio>
            <Radio :label="3">
              <span>年卡</span>
            </Radio>
          </RadioGroup>
          <div style="margin-top: 50px">审核结果：{{ applyRemake }}</div>
          <div slot="footer">
            <Button @click="vipModel = false">取消</Button>
            <Button @click="vipOk" type="primary">确定</Button>
          </div>
        </Modal>
        <Modal v-model="passwordModel" title="修改密码">
          <Form
              ref="formPassword"
              :model="formPassword"
              :rules="rulePassword"
            >
              <FormItem label="旧密码" prop="password">
                <Input
                  type="text"
                  v-model="formPassword.password"
                  placeholder="旧密码"
                >
                </Input>
              </FormItem>
              <FormItem label="新密码" prop="newPassword">
                <Input
                  type="password"
                  v-model="formPassword.newPassword"
                  placeholder="新密码"
                >
                </Input>
              </FormItem>
              <FormItem label="确认新密码" prop="confirmPassword">
                <Input
                  type="password"
                  v-model="formPassword.confirmPassword"
                  placeholder="确认新密码"
                >
                </Input>
              </FormItem>
            </Form>
          <div slot="footer">
            <Button @click="passwordModel = false">取消</Button>
            <Button type="primary" @click="editPassword('formPassword')"
                  >确认修改</Button
                >
          </div>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getInfoApi,
  getMemberCourseListApi,
  logoutApi,
  evaluateApi,
  editEvaluateApi,
  putMemberApi,
  updateCoachApi,
  applyVipApi,
  memberEvaluateApi,
  memberEvaluateDetailApi,
  deleteEvaluateApi,
  coachCourseApi,
  updatePasswordApi,
  getApplyInfoApi
} from "../api/api";
import { getToken, setToken } from "../utils/cache/cookies";
const isPhoneNumber = str => {
  const reg = /^(?:(?:\+|00)86)?1\d{10}$/;
  return reg.test(str);
};
const checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入手机号"));
  }
  setTimeout(() => {
    if (!isPhoneNumber(value)) {
      return callback(new Error("请输入正确的手机号"));
    } else {
      callback();
    }
  }, 1000);
};
export default {
  name: "ContactUs",
  data() {
    const checkPassword = (rule, value, callback) => {
      if (value !== this.formPassword.newPassword) {
        return callback(new Error("和新密码不相同"));
      } else {
        callback();
      }
    };
    return {
      passwordModel: false,
      defaultList: [],
      headers: {
        Token: getToken()
      },
      defaultList: [],
      uploadList: [],
      vipTimeType: 1,
      vipModel: false,
      modal1: false,
      modalUser: false,
      formInline: {},
      tabType: "first",
      formEvaluate: {},
      formUser: {},
      columns1: [
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "课程名称",
          key: "courseName"
        },
        {
          title: "教练名称",
          key: "coachName"
        },
        {
          title: "上课日期",
          key: "time"
        },
        {
          title: "上课时间",
          key: "type"
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      myEvaluateColumns: [
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "课程名称",
          key: "courseName"
        },
        {
          title: "教练",
          key: "coachName"
        },
        {
          title: "会员",
          key: "memberName"
        },
        {
          title: "评价内容",
          key: "content"
        },
        {
          title: "评分",
          key: "score"
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center"
        }
      ],
      genderList: [
        {
          value: 0,
          label: "女"
        },
        {
          value: 1,
          label: "男"
        }
      ],
      formPassword: {
        newPassword: "",
        password: "",
        confirmPassword: ""
      },
      rulePassword: {
        newPassword: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            type: "string",
            min: 6,
            max: 12,
            message: "位数在6-12之间",
            trigger: "blur"
          }
        ],
        password: [{ required: true, message: "请输入", trigger: "blur" }],
        confirmPassword: [
          { required: true, validator: checkPassword, trigger: "blur" }
        ]
      },
      list: [],
      myEvaluateList: [],
      item: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: "",
        courseId: ""
      },
      queryEvaluateParams: {
        pageNum: 1,
        pageSize: 10
      },
      ruleUser: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        email: [
          { required: true, message: "请输入", trigger: "blur" },
          { type: "email", message: "输入正确的邮箱", trigger: "blur" }
        ],
        age: [
          { required: true, type: "number", message: "请输入", trigger: "blur" }
        ],
        avatar: [{ required: true, message: "请上传头像", trigger: "blur" }]
      },
      ruleEvaluate: {
        score: [
          { required: true, type: "number", message: "请评分", trigger: "blur" }
        ],
        content: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      total: 0,
      thirdtotal: 0,
      evaluateType: "add",
      applyRemake: ""
    };
  },
  created() {
    this.formInline.type = this.$store.state.user.userObj.type;
    this.getInfo();
  },
  methods: {
    handleSuccess(res, file) {
      this.formUser.avatar = res.data;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      this.formUser.avatar = "";
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 1;
      if (!check) {
        this.$Notice.warning({
          title: "最多上传一张"
        });
      }
      return check;
    },
    // 点击tabs
    TabsClick(e) {
      if (e == "first") {
        this.getInfo();
      } else if (e == "second") {
        this.getMemberCourseList();
      } else {
        this.memberEvaluate();
      }
    },
    // 删除评价
    deleteEvaluate(id) {
      deleteEvaluateApi(id).then(res => {
        this.$Message.success("删除成功");
        this.memberEvaluate();
      });
    },
    // 查看评价
    viewEvaluate(row) {
      this.evaluateType = "view";
      memberEvaluateDetailApi(row.id).then(res => {
        if (res.data) {
          this.modal1 = true;
          this.formEvaluate = res.data;
        }
      });
    },
    // 我的评价
    memberEvaluate() {
      memberEvaluateApi(this.queryEvaluateParams).then(res => {
        this.myEvaluateList = res.data.rows;
        this.thirdtotal = res.total;
      });
    },
    // 升级VIP
    vipOk() {
      let data = {
        type: this.vipTimeType,
        remake: "",
        status: 0
      };
      applyVipApi(data).then(res => {
        this.vipModel = false;
        this.$Message.success("申请成功");
      });
    },
    handelVipModel() {
      this.vipModel = true;
      getApplyInfoApi().then(res => {
        this.applyRemake = res.data.remake;
      })
    },
    // 编辑评价
    editEvaluate(row) {
      this.formEvaluate = row;
      this.evaluateType = "edit";
      this.modal1 = true;
    },
    // 评价
    evaluate(row) {
      this.evaluateType = "add";
      this.modal1 = true;
      this.$refs["formEvaluate"].resetFields();
      this.formEvaluate = row;
    },
    editPassword(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          updatePasswordApi(this.formPassword).then(res => {
            this.$Message.success("修改成功");
            this.$refs[name].resetFields();
            this.passwordModel = false
          });
        } else {
          console.log("ddd");
        }
      });
    },
    userOk(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let myMth = "";
          if (this.formInline.type == 3) {
            myMth = updateCoachApi(this.formUser);
          } else {
            myMth = putMemberApi(this.formUser);
          }
          myMth.then(res => {
            setToken(res.data.token);
            this.$Message.success("修改成功");
            this.modalUser = false;
            this.getInfo();
          });
        } else {
          console.log("ddd");
        }
      });
    },
    // 评价修改
    ok(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = {
            memberCourseId: this.formEvaluate.id,
            score: this.formEvaluate.score,
            content: this.formEvaluate.content
          };
          let api = "";
          if (this.evaluateType == "add") {
            api = evaluateApi(data);
          } else if (this.evaluateType == "edit") {
            api = editEvaluateApi(data);
          }
          api.then(res => {
            this.$Message.success("评价成功");
            this.modal1 = false;
            this.getMemberCourseList();
          });
        } else {
          console.log("ddd");
        }
      });
    },
    // 编辑个人信息
    editUser() {
      this.modalUser = true;
      setTimeout(() => {
        this.uploadList = this.$refs.upload.fileList;
      }, 1000);
      this.defaultList = [];
      this.defaultList.push({ url: this.formUser.avatar });
    },
    getInfo() {
      getInfoApi().then(res => {
        this.formInline = res.data;
        this.formUser = JSON.parse(JSON.stringify(res.data));
        if (this.formInline.type == 3) {
          this.columns1.pop();
        }
      });
    },
    // 我的课程
    getMemberCourseList() {
      let myMth = "";
      if (this.formInline.type == 3) {
        myMth = coachCourseApi(this.queryParams);
      } else {
        myMth = getMemberCourseListApi(this.queryParams);
      }
      myMth.then(res => {
        this.list = res.data.rows;
        this.total = res.total;
      });
    },
    thirdpageChange(e) {
      this.queryEvaluateParams.pageNum = e;
      this.memberEvaluate();
    },
    pageChange(e) {
      this.queryParams.pageNum = e;
      this.getProgrammeList();
    },
    thirdsizeChange(e) {
      this.queryEvaluateParams.pageSize = e;
      this.memberEvaluate();
    },
    sizeChange(e) {
      this.queryParams.pageSize = e;
      this.getProgrammeList();
    },
    logout() {
      logoutApi().then(res => {
        this.$router.push("/login");
      });
    }
  }
};
</script>
<style scoped>
.buttonBox {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.ContactUs-container {
  padding: 40px 0;
  transition: all ease 0.5s;
  box-sizing: border-box;
}

#map {
  width: 100%;
  height: 365px;
}

.row {
  margin-right: 0;
  margin-left: 0;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 997px) {
  .ContactUs-container {
    padding: 20px 0;
  }
}

.zy-required:before {
  content: "*";
  color: red;
}

.labelBox {
  width: 200px;
}
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

</style>
